<template>
	<div class="wrap">
		<div class="registerContent">
			<div class="l_header_bg"></div>
			<div class="l-cont">
				<div class="accountCenter">
					<div id="box">
						<div class="con">
							<div class="con_head">
								著作权证书详情
							</div>
							<div class="boder">
								<div class="boder_blue"></div>
							</div>
							<div class="xq">证书详情</div>
							<div class="con_list">
								<div class="ng-div-1">
									<label><span class="bt">*</span>登记作品：</label>
									<div class="choose_btn csasd" @click="chooseWorksHandle">选择</div>
									<div class="choose-works-info" v-if="worksId && worksTitle">已选:({{worksId}}){{worksTitle}}</div>
								</div>
								<div class="ng-div-1">
									<label><span class="bt">*</span>登记类型：</label>
									<div><input autocomplete="off" v-model="registerType" type="radio" name="" id="" value="" checked="true" />作品著作权登记</div>
								</div>
								<div class="ng-div-1">
									<label><span class="bt">*</span>登记日期：</label>
									<DatePicker type="date" :value="dateValueFirst" placeholder="请选择日期" style="width: 200px;margin-bottom: 0;"></DatePicker>
									
									<!-- <div>
										<input autocomplete="off" class="" style="width: 232px;cursor: pointer;padding-left: 10px;height:42px;border: 1px solid #E3E3E3;background: url('/resources/common/components/img/dataGray.png?v=20180806') 95% center no-repeat;"
										 id="date_rq" placeholder="请选择日期" class="dataEnd companyEnd" onclick="SelectDate(this,'yyyy-MM-dd')" name="businessLicenseValidityEnd" />
										<i style="color: red" id="Woring"></i>
									</div> -->
								</div>
								<div class="ng-div-1">
									<label><span class="bt">*</span>作品登记号：</label>
									<div><input autocomplete="off" v-model="wordIDRegister" type="text" name="" id="num" value="" maxlength="100" style="width:713px;padding-left: 10px;height: 42px;border: 1px solid #E3E3E3;"></div>
								</div>
								<div class="ng-div-1">
									<label><span class="bt">*</span>登记证书：</label>
									<div v-if="worksTitle" id="uploder_file">
										<Upload
										:max-size="50*1024*1024"
										:default-file-list="defaultList"
										:on-success="handleSuccess"
										id="file_upload" action="//jsonplaceholder.typicode.com/posts/">
											<Button icon="ios-cloud-upload-outline">选择文件</Button>
										</Upload>
									</div>
									<div v-else id="uploader" style="margin-left:10px">
										<div class="tipsText">请先选择登记作品</div>
									</div>
									<div class="tip-name-delete" style="display: none;">删除</div>
								</div>
							</div>
							<div class="more_cailiao"  @click="continueUploader">继续上传申请材料<span></span></div>
							<div class="more" v-if="continueUploaderFile">
								<div class="cailiao">申请材料</div>
								<div class="ng-div-1">
									<label>作品著作权登记申请表：</label>
									<Upload
									:max-size="50*1024*1024"
									:default-file-list="defaultList"
									:on-success="handleSuccess"
									id="file_upload" action="//jsonplaceholder.typicode.com/posts/">
										<Button icon="ios-cloud-upload-outline">选择文件</Button>
									</Upload>
									<!-- <div id="uploader2" class="dds" style="margin-left:10px"></div>
									<div class="ZZde" style="display: none;position: absolute;" onclick="DelFile(2)">删除</div>
									 -->
									 <div class="CDs">文件名称不可有特殊字符，大小10M以内。</div>
								</div>
								<div class="ng-div-1">
									<label>申请人身份证明文件复印件：</label>
									<Upload
									:max-size="50*1024*1024"
									:default-file-list="defaultList"
									:on-success="handleSuccess"
									id="file_upload" action="//jsonplaceholder.typicode.com/posts/">
										<Button icon="ios-cloud-upload-outline">选择文件</Button>
									</Upload>
									<!-- <div id="uploader3" class="dds" style="margin-left:10px"></div>
									<div class="ZZde" style="display: none;position: absolute;" onclick="DelFile(3)">删除</div>
									 -->
									 <div class="CDs">文件名称不可有特殊字符，大小10M以内。</div>
								</div>
								<div class="ng-div-1">
									<label>权利归属证明文件：</label>
									<Upload
									:max-size="50*1024*1024"
									:default-file-list="defaultList"
									:on-success="handleSuccess"
									id="file_upload" action="//jsonplaceholder.typicode.com/posts/">
										<Button icon="ios-cloud-upload-outline">选择文件</Button>
									</Upload>
									<!-- <div id="uploader4" class="dds" style="margin-left:10px"></div>
									<div class="ZZde" style="display: none;position: absolute;" onclick="DelFile(4)">删除</div>
									 -->
									 <div class="CDs">文件名称不可有特殊字符，大小10M以内。</div>
								</div>
								<div class="ng-div-1">
									<label>作品说明书：</label>
									<Upload
									:max-size="50*1024*1024"
									:default-file-list="defaultList"
									:on-success="handleSuccess"
									id="file_upload" action="//jsonplaceholder.typicode.com/posts/">
										<Button icon="ios-cloud-upload-outline">选择文件</Button>
									</Upload>
									<!-- <div id="uploader5" class="dds" style="margin-left:10px"></div>
									<div class="ZZde" style="display: none;position: absolute;" onclick="DelFile(5)">删除</div>
									 -->
									 <div class="CDs">文件名称不可有特殊字符，大小10M以内。</div>
								</div>
								<div class="ng-div-1">
									<label>代理委托书：</label>
									<Upload
									:max-size="50*1024*1024"
									:default-file-list="defaultList"
									:on-success="handleSuccess"
									id="file_upload" action="//jsonplaceholder.typicode.com/posts/">
										<Button icon="ios-cloud-upload-outline">选择文件</Button>
									</Upload>
									<!-- <div id="uploader6" class="dds" style="margin-left:10px"></div>
									<div class="ZZde" style="display: none;position: absolute;" onclick="DelFile(6)">删除</div>
									 -->
									 <div class="CDs">文件名称不可有特殊字符，大小10M以内。</div>
								</div>
								<div class="ng-div-1">
									<label>代理人身份证明文件：</label>
									<Upload
									:max-size="50*1024*1024"
									:default-file-list="defaultList"
									:on-success="handleSuccess"
									id="file_upload" action="//jsonplaceholder.typicode.com/posts/">
										<Button icon="ios-cloud-upload-outline">选择文件</Button>
									</Upload>
									<!-- <div id="uploader7" class="dds" style="margin-left:10px"></div>
									<div class="ZZde" style="display: none;position: absolute;" onclick="DelFile(7)">删除</div>
									 -->
									 <div class="CDs">文件名称不可有特殊字符，大小10M以内。</div>
								</div>
								<div class="ng-div-1">
									<label>其他文件：</label>
									<Upload
									:max-size="50*1024*1024"
									:default-file-list="defaultList"
									:on-success="handleSuccess"
									id="file_upload" action="//jsonplaceholder.typicode.com/posts/">
										<Button icon="ios-cloud-upload-outline">选择文件</Button>
									</Upload>
									<!-- <div id="uploader8" class="dds" style="margin-left:10px"></div>
									<div class="ZZde" style="display: none;position: absolute;" onclick="DelFile(8)">删除</div>
									 -->
									 <div class="CDs">文件名称不可有特殊字符，大小10M以内。</div>
								</div>
							</div>
							<div class="go_">
								<div class="go_cen">
									<div class="false_" @click="cancelCertificateDetails">取消</div>
									<button class="_go" style="border: none" @click="confirmCertificateDetails">提交</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--选择作品-->
			<Modal
				v-model="chooseWorksStatus"
				title="选择作品"
				width='70%'
				ok-text="确定"
				id="contect_detail"
				@on-ok="deleteConfirmSubmit"
				@on-cancel="deleteCancelSubmit"
				:loading="chooseWorksLoading"
				cancel-text="取消">
				<div  class="popup-text">
					<div class="jie">
						<!-- <div class="modal-content"> -->
							<!-- <div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								<h4 class="modal-title" id="myModalLabel">选择作品</h4>
							</div> -->
							<div class="modal-body">
								<div class="serch">
									<label for="">作品ID或作品名称：</label>
									<div class="ser_more">
										<input class="workdIDOrName" style="padding: 0 10px;" type="" name="radio" id="" value="" />
										<div class="zp_ser"><span></span>搜 索</div>
									</div>
								</div>
								<table class="table table-striped" style="margin-top: 20px;border-top: 1px solid #F0F2F8;">
									<thead>
										<th class="list-title-head" style="text-align: center;">作品ID</th>
										<th class="list-title-head">作品名称</th>
										<th class="list-title-head" style="text-align: center;">作品类型</th>
										<th class="list-title-head">操作</th>
									</thead>
									<tbody class="tbody">
										<!-- <tr v-if="worksData.data.length === 0">
											<th colspan="4" style="text-align: center;line-height: 480px;">暂无数据！</th>
										</tr> -->
										<tr v-for="(item,index) in worksData.data" :key="index">
											<td align='center'>{{item.id}}</td>
											<td>{{item.title}}</td>
											<td align='center'>{{convertWorksType1(item.worksType)}}</td>
											<td >
												<div @click="chooseWorks(item.id,item.title)">选择</div>
											</td>
										</tr>

									</tbody>

								</table>
								<pagination style="margin-top: 27px;" :total="total" :current-page='current' :fromType="fromType" @CertificateDetails="pagechange"></pagination>
								
								<!-- <div class="page"></div> -->
							</div>

						<!-- </div> -->
					</div>
				</div>
			</Modal>
		</div>
	</div>
</template>

<script>
	import pagination from '../../common/pagination/pagination';
	import utils from '../../../assets/js/utils.js'
	export default {
		name: "CertificateDetails",
		components: {
			pagination,

		},
		data() {
			return {
				// 继续上传文件
				continueUploaderFile:false,
				// 已选作品
				worksTitle:'',
				worksId:'',
				chooseWorksLoading:true,
				// 作品选择model
				chooseWorksStatus:false,
				// 登记时间
				dateValueFirst:'',
				// 分页页面区分来源
				fromType:'CertificateDetails',
				total: 40, // 记录总条数
				display: 10, // 每页显示条数
				current: 1, // 当前的页数
				// 作品数据
				worksData:{
					
				},
				// 登记类型
				registerType:'',
				// 作品登记号
				wordIDRegister:'',
				
				
			};
		},
		methods: {
			// 选择作品
			chooseWorksHandle(){
				// 获取作品信息
				this.total = 58;
				this.worksData = {
					"count":58,
					"data":[
						{
						"id":2713,
						"title":"22222",
						"worksType":4
						},
						{
						"id":2640,
						"title":"2222222",
						"worksType":4
						},
						{
						"id":2639,
						"title":"33333",
						"worksType":5
						},
						{
						"id":2638,
						"title":"333333",
						"worksType":6
						},
						{
						"id":2637,
						"title":"11我我我为我我我",
						"worksType":2
						}
					],
					"pageNumber":1,
					"pageSize":10,
					"totalPage":6
				}
				this.chooseWorksStatus = true;
			},
			// 选择确认按钮
			deleteConfirmSubmit(){
				setTimeout(() => {
					this.$Modal.remove();
					this.chooseWorksStatus = false
				}, 2000);
			},
			// 选择取消按钮
			deleteCancelSubmit(){
				console.log('shanchuquxiao')
			},
			// 分页
			pagechange(currentPage) {
				console.log("著作权管理="+currentPage);
				// ajax请求, 向后台发送 currentPage, 来获取对应的数据
			},
			// 作品类型
			convertWorksType1(value){
				let valueD = utils.convertWorksType(value);
				return valueD;
				console.log(utils.convertWorksType)
			},
			// 选择作品
			chooseWorks(workID,title){
				setTimeout(() => {
					this.worksTitle = title;
					this.worksId = workID;
					this.$Modal.remove();
					this.chooseWorksStatus = false;
				}, 2000);
			},
			// 继续上传文件
			continueUploader(){
				this.continueUploaderFile = true;
			},
			// 取消
			cancelCertificateDetails(){
				this.$router.push({  //核心语句
					path:'/copyRight/copyrightManage',   //跳转的路径
					query:{           //路由传参时push和query搭配使用 ，作用时传递参数
						activeStatus:2 ,  
					}
				})
			},
			// 提交
			confirmCertificateDetails(){
				this.$router.push({  //核心语句
					path:'/copyRight/copyrightManage',   //跳转的路径
					query:{           //路由传参时push和query搭配使用 ，作用时传递参数
						activeStatus:2 , 
					}
				})
			}

		},

		beforeMount: function() {},
		mounted: function() {
			
		}
	};
</script>

<style scoped="scoped">
	@import 'CertificateDetails.css'
</style>
